<template>
  <div class="panel device-stats">
    <h2 class="panel-title">设备统计</h2>
    <div class="stats-content">
      <!-- TODO: 后端数据 - 设备统计信息 -->
      <div class="stats-item">
        <div class="stats-value">{{ stats.total }}</div>
        <div class="stats-label">总设备数</div>
      </div>
      <div class="stats-item">
        <div class="stats-value">{{ stats.online }}</div>
        <div class="stats-label">在线设备</div>
      </div>
      <div class="stats-item">
        <div class="stats-value">{{ stats.offline }}</div>
        <div class="stats-label">离线设备</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const stats = ref({
  total: 6,
  online: 5,
  offline: 1
})
</script>

<style scoped>
.device-stats {
  height: 150px;
}

.stats-content {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

.stats-item {
  text-align: center;
}

.stats-value {
  font-size: 24px;
  color: #42b983;
  margin-bottom: 5px;
}

.stats-label {
  font-size: 14px;
  color: #888;
}
</style> 